<!DOCTYPE html>
<html>
<head lang="en">
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" type="text/css" href="./stylesheets/base.css">
    <link rel="stylesheet" type="text/css" href="./stylesheets/yuyue.css">
    <style>


        .contanier {
            position: relative;
            width: 80%;
            height: 800px;
            margin: 0 auto;
        }

        .chart {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 250px;
            height: 250px;
            border-radius: 50%;
            margin-left: -125px;
            margin-top: -125px;
        }

        .point {
            position: absolute;
            left: 50%;
            top: 0;
            margin-left: -5px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: red;
        }

        .cir {
            position: absolute;
            left: 150px;
            top: 50px;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-color: green;
        }
    </style>
</head>

<body>
<div class="contanier">

    <div class="chart" id="chart1"></div>
    <div class="chart" id="chart2"></div>
    <div class="chart" id="chart3"></div>
    <div class="chart" id="chart4"></div>
    <div class="chart" id="chart5"></div>
</div>
<div class="cir"></div>
<div class="point"></div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/common.js"></script>
<script src="plugins/echarts/dist/echarts-all.js"></script>
<script>
    var _toolbox = {
        show: true,
        feature: {
            saveAsImage: {show: true}
        }
    };
    function initPie() {
        $(".chart").each(function (index, item) {
            (function initMap(d) {
                var taskMap = echarts.init(d);
                //挂载事件库
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        show: false,
                        orient: 'vertical',
                        x: 'left',
                        data: ['手机用户', '上网本用户']
                    },
                    toolbox: {
                        show: false,
                    },
                    calculable: false,
                    series: [
                        {
                            name: '在线用户',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    }
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        position: 'center',
                                        textStyle: {
                                            fontSize: '14',
                                            fontWeight: 'bold'
                                        }
                                    }
                                }
                            },
                            data: [
                                {value: 335, name: '手机用户'},
                                {value: 310, name: '上网本用户'}
                            ]
                        }
                    ]
                };
                taskMap.setOption(option);
            }(item));
        });
    }
    function aniCir(selector) {
        var runing = false;
        var $tag = $(selector);
        var ani = function () {
            /* for(var i=0;runing;i++){
             var x1 = Math.sin(i * Math.PI / 180) * 200;
             var y1 = Math.cos(i * Math.PI / 180) * 200;
             $tag.animate({left: 300 + x1, top: 200 + y1}, "slow");
             }*/
            var i = 0;
            var intev = setInterval(function () {
                var x1 = Math.sin(i * Math.PI / 180) * 150;
                var y1 = Math.cos(i * Math.PI / 180) * 150;

                $tag.animate({left: 300 + x1, top: 200 + y1}, 5);
                if (!runing) {
                    clearInterval(intev);
                } else {
                    i++;
                }
            }, 1);
        }
        this.start = function () {
            runing = true;
            ani();
        }
        this.stop = function () {
            runing = false;
        }
    }
    $(function () {
        /* initPie();
         var cw=$(".contanier").width(),ch=$(".contanier").height();
         var r = 200;
         var h = 72;
         var cx = cw/2, cy = ch/2;
         $(".chart").each(function (index, item) {
         var x = Math.sin(index * h * Math.PI / 180) * r;
         var y = Math.cos(index * h * Math.PI / 180) * r;
         $(item).animate({left: cx + x, top: cy + y}, "slow");
         });*/
        var ani = new aniCir(".point");
        ani.start();
        var s = setTimeout(function () {
            ani.stop();
            clearTimeout(s);
        }, 30000)

    });

</script>
</body>

</html>
